<!--
@Author benhailong
@Time 2020/9/27 10:03 上午
-->
<template>
  <div class="login-bg">
    <div class="login-box">
      <img src="../../assets/images/login-banner.png" alt="">
      <div>
        <div class="login-form">
           <div class="ant-flex ant-flex-around">
             <div :class="tabIndex==0?'login-top login-top-hover':'login-top'" @click="tabIndex=0">用户登录</div>
             <div :class="tabIndex==1?'login-top login-top-hover':'login-top'" @click="tabIndex=1">用户注册</div>
           </div>
          <div class="login-input">
            <el-input
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
                v-model="from.username">
            </el-input>
          </div>
          <div class="login-input">
            <el-input
                placeholder="请输入密码"
                type="password"
                prefix-icon="el-icon-user"
                v-model="from.password">
            </el-input>

          </div>
          <div class="login-input" v-if="tabIndex==1">
            <el-input
                placeholder="请确认密码"
                type="password"
                prefix-icon="el-icon-user"
                v-model="from.passwords">
            </el-input>
          </div>
          <div class="login-input">
            <el-button type="primary" v-if="tabIndex==0" @click="login">登录</el-button>
            <el-button type="primary" v-if="tabIndex==1" @click="zc">注册</el-button>
          </div>
          <template v-if="tabIndex==1">
            <el-checkbox v-model="checked">同意</el-checkbox>
            <span @click="xieyi" :class="checked?'xieyi xieyi-hover':'xieyi'" >《宁证用户注册协议》</span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login,zhuce } from "@/utils/serve/users";
export default {
  name: "login",
  props: {},
  data() {
    return {
      mid: this.$route.params.mid, // 推荐人的ID
      tabIndex:0,
      checked: true,
      from:{
        username: "",
        password: "",
        passwords:""
      }
    };
  },
  components: {
    // 第三方组件实例化
  },
  mounted: function () {

  },
  methods: {
    // 方法
    xieyi(){
      //
      this.$message.success("弹出协议，暂时没有内容")
    },
    login(){
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      login(this.from.username,this.from.password,res=>{
        _this.$store.commit("setIsLoading", false);
        console.log(res)
        if(res.code == 0){
          _this.$message.success("登录成功");
          _this.$store.commit("setUser", res.data);
          this.$router.push('/');
        }else {
          _this.$message.error(res.msg);
        }
      })
    },
    zc(){
      // 判断密码是否正确
      if(this.from.username==null||this.from.username==undefined||this.from.username==''){
        this.$message.error("用户名不能为空");return ;
      }
      if(this.from.password==null||this.from.password==undefined||this.from.password==''){
        this.$message.error("密码不能为空");return ;
      }
      if(!this.checked){
        this.$message.error("请先同意《宁证用户注册协议》");return ;
      }
      if(this.from.password!=this.from.passwords){
        this.$message.error("两次密码输入不一致");
        return ;
      }
      let _this = this;
      console.log()
      _this.$store.commit("setIsLoading", true);
      zhuce(_this.mid, _this.from.username, _this.from.password, res => {
        _this.$store.commit("setIsLoading", false);
        console.log(res)
        if(res.code == 0){
          this.$message.success("注册成功，请登录") ;
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/style.scss";
</style>
